<template>
	<view style="background-color: #F5F5F8;height: 100vh;">
		<view style="width: 100%;height: 72rpx;background-color: #FDFCEC;">
			<view style="text-align: center;color: #F86E21;font-size: 28rpx;padding-top:22rpx ;">系统支持查询的最早日期为2021年5月01日</view>
		</view>
		<view style="width: 100%;height: 182rpx;background-color: #FFFFFF;position: relative;">
			<view style="width: 720rpx;height: 90rpx;margin-left: 30rpx;border-bottom: 2rpx solid #E5E5E5;display: flex;">
				<view style="font-size: 34rpx;line-height: 92rpx;">起始时间</view>
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
				    <view v-if="real" style="margin-left: 116rpx;font-size: 34rpx;line-height: 92rpx;color: #CCCCCC;width: 450rpx;">请选择</view>
					<view style="margin-left: 116rpx;font-size: 34rpx;line-height: 92rpx;" v-else>{{date}}</view>
				</picker>
				<view style="color: #C7C7CC;position: absolute;top: 20rpx;left: 706rpx;">></view>
			</view>
			<view style="width: 720rpx;height: 90rpx;margin-left: 30rpx;border-bottom: 2rpx solid #E5E5E5;display: flex;">
				<view style="font-size: 34rpx;line-height: 92rpx;">截止时间</view>
				<picker mode="date" :value="date1" :start="startDate" :end="endDate" @change="bindDateChange1">
				    <view v-if="real1" style="margin-left: 116rpx;font-size: 34rpx;line-height: 92rpx;color: #CCCCCC;width: 450rpx;">请选择</view>
					<view style="margin-left: 116rpx;font-size: 34rpx;line-height: 92rpx;" v-else>{{date1}}</view>
				</picker>
				<view style="color: #C7C7CC;position: absolute;top: 110rpx;left: 706rpx;">></view>
			</view>
		</view>
		<view style="position: fixed;bottom: 0;width: 750rpx;height: 150rpx;background-color: #FFFFFF;">
			<button style="width: 690rpx;height: 94rpx;margin-left: 32rpx;margin-top: 14rpx;background-color: rgba(81, 154, 255, 0.3);color: #FFFFFF;border-radius: 47rpx;" v-if="btnreal">立即创建</button>
			<button style="width: 690rpx;height: 94rpx;margin-left: 32rpx;margin-top: 14rpx;background-color: #519AFF;color: #FFFFFF;border-radius: 47rpx;" v-else @click="goto11()">立即创建</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
			           format: true
			       })
			return {
				date: currentDate,
				date1:'',
				real:true,
				real1:true,
				btnreal:true,
				index:'4',
				jiedao:''
			}
		},
		computed: {
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        }
		    },
		methods: {
			bindDateChange(e){
				this.date = e.target.value
				console.log(e);
				console.log(this.date);
				this.real=false
				if(this.real==false&&this.real1==false){
					this.btnreal=false
				}
				else{
					this.btnreal=true
				}
			},
			bindDateChange1(e){
				this.date1 = e.target.value
				console.log(e);
				console.log(this.date1);
				this.real1=false
				if(this.real==false&&this.real1==false){
					this.btnreal=false
				}
				else{
					this.btnreal=true
				}
			},
			goto11(){
				uni.redirectTo({
					url:'../list?date='+this.date+'&date1='+this.date1+'&index='+this.index+'&jiedao='+this.jiedao
				})
			},
			getDate(type) {
			            const date = new Date();
			            let year = date.getFullYear();
			            let month = date.getMonth() + 1;
			            let day = date.getDate();
			
			            if (type === 'start') {
			                year = year - 60;
			            } else if (type === 'end') {
			                year = year + 2;
			            }
			            month = month > 9 ? month : '0' + month;
			            day = day > 9 ? day : '0' + day;
			            return `${year}-${month}-${day}`;
			        }
		},
		onLoad(options) {
			console.log(options);
			this.jiedao = options.jiedao
		}
	}
</script>

<style>

</style>
